<template>
  <div class="userCenterBody">
    <div class="userCenter">
      <div class="headerCard">
        <el-card style="width: 100%;" shadow="hover" class="card1">
          <template #header>
            <div class="card-header1">

              <div class="userInfo">
                <div class="title" style="width: 100%;height: 100%;  margin-right: 30px;">
                  <el-avatar :size="100" :src="userInfo.avatarUrl"/>
                </div>

                <div class="detail">
                  <div class="title" style="display: flex;width: 100%;height: 35px">
                    <div class="userName">{{ userInfo.username }}</div>
                    <div class="isVIP">
                      <img src="">
                    </div>
                  </div>

                  <div class="description">
                    <div>暂无个人简介</div>
                    <div style="height: 18px"></div>
                    <div class="userBaseInfo">
                      <el-row :gutter="20">
                        <el-col :span="6">
                          <div class="grid-content ep-bg-purple"/>
                          <el-row>
                            <el-col :span="7">
                              <div class="grid-content ep-bg-purple"/>
                              <el-icon v-if="userInfo.gender===1">
                                <Male/>
                              </el-icon>
                              <el-icon v-else-if="userInfo.gender===0">
                                <Female/>
                              </el-icon>

                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content ep-bg-purple-light"/>
                              {{ userInfo.gender === 1 ? '男' : '女' }}
                            </el-col>
                          </el-row>

                        </el-col>
                        <el-col :span="6">
                          <div class="grid-content ep-bg-purple"/>
                        </el-col>
                        <el-col :span="6">
                          <div class="grid-content ep-bg-purple"/>
                          <el-row style="width: 200px">
                            <el-col :span="4">
                              <div class="grid-content ep-bg-purple"/>
                              <el-icon>
                                <Message/>
                              </el-icon>
                            </el-col>
                            <el-col :span="8" style="margin-right: 50px">
                              <div class="grid-content ep-bg-purple-light"/>
                              邮箱:{{ userInfo.email }}
                            </el-col>
                          </el-row>
                        </el-col>

                      </el-row>
                    </div>

                  </div>
                </div>
              </div>


              <div class="editInfo">
                <el-button type="primary" size="large" style="width: 150px" @click="editUserInfo()">编辑信息</el-button>
              </div>


            </div>
          </template>
        </el-card>
      </div>
      
      <!-- 媒体记录管理区域 -->
      <div class="mediaManagement" style="margin-top: 30px;">
        <el-card style="width: 100%;" shadow="hover">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: bold;">媒体记录管理</span>
              <el-button type="primary" @click="refreshMediaList">刷新</el-button>
            </div>
          </template>
          
          <!-- 媒体记录表格 -->
          <el-table :data="mediaList" style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80"/>
            <el-table-column prop="taskId" label="任务ID" width="200"/>
            <el-table-column prop="mediaUrl" label="媒体URL" min-width="300">
              <template #default="scope">
                <el-link :href="scope.row.mediaUrl" target="_blank" type="primary">
                  {{ scope.row.mediaUrl }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="userId" label="用户ID" width="100" v-if="isAdmin"/>
            <el-table-column prop="createTime" label="创建时间" width="180">
              <template #default="scope">
                {{ formatDate(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="deleteMedia(scope.row.id)"
                  :disabled="!canDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 空状态 -->
          <el-empty v-if="!loading && mediaList.length === 0" description="暂无媒体记录"/>
        </el-card>
      </div>
    </div>
  </div>

</template>

<script setup>

import {ref, onMounted} from "vue";
import {Female, Male, Message} from "@element-plus/icons-vue";
import {useUserStore} from "../stores/userStore.js";
import router from "../router/index.js";
import {getMediaListApi, deleteMediaApi} from "../apis/mediaAPI.js";

const userStore = useUserStore()
const userInfo = ref(userStore.userInfo)
const {username, avatar, gender, phone, email} = userInfo

// 媒体记录管理相关数据
const mediaList = ref([])
const loading = ref(false)
const isAdmin = ref(false)

// 检查用户是否为管理员
function checkAdminRole() {
  isAdmin.value = userInfo.value.role === 1
}

// 获取媒体记录列表
async function getMediaList() {
  loading.value = true
  try {
    const response = await getMediaListApi()
    if (response.code === 200) {
      mediaList.value = response.data || []
    } else {
      ElMessage.error(response.msg || '获取媒体记录失败')
    }
  } catch (error) {
    console.error('获取媒体记录失败:', error)
    ElMessage.error('获取媒体记录失败')
  } finally {
    loading.value = false
  }
}

// 刷新媒体记录列表
function refreshMediaList() {
  getMediaList()
}

// 删除媒体记录
async function deleteMedia(id) {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条媒体记录吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const response = await deleteMediaApi(id)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      getMediaList() // 重新获取列表
    } else {
      ElMessage.error(response.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除媒体记录失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 判断是否可以删除记录
function canDelete(record) {
  // 管理员可以删除所有记录，普通用户只能删除自己的记录
  return isAdmin.value || record.userId === userInfo.value.id
}

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

function editUserInfo(username, avatar, gender, phone, email) {
  router.push({
    path: '/editInfo',
    query: {
      username,
      avatar,
      gender,
      phone,
      email
    }
  })
}

// 组件挂载时获取数据
onMounted(() => {
  checkAdminRole()
  getMediaList()
})


</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.userCenterBody {
  width: 100%;
  min-height: calc(100vh - 105px);
  background: linear-gradient(to bottom, #50a8fe, #f0f2f5);
  margin-bottom: 60px;
  padding: 20px 0 60px 0;
}

.userCenter {
  width: 75%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}


.content {
  display: flex;
  justify-content: space-between;
}

.rightContent {
  width: 300px;

}

.card-header {
  display: flex;
}

.share {
  width: 30px;
}

.userInfo {
  width: 108px;
  height: 108px;
  display: flex;
  margin-right: auto;
}


.userBaseInfo {
  min-width: 500px;
}

.editInfo {
  text-align: right;
  margin-right: 30px;
}

.mediaManagement {
  width: 100%;
  margin-top: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(to bottom, rgba(80, 168, 254, 0.1), rgba(240, 242, 245, 0.1));
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.el-card {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}

.el-card__header {
  background: linear-gradient(to bottom, rgba(80, 168, 254, 0.05), rgba(240, 242, 245, 0.05));
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.el-table {
  background: transparent;
}

.el-table th {
  background: linear-gradient(to bottom, rgba(80, 168, 254, 0.05), rgba(240, 242, 245, 0.05));
  color: #2c3e50;
  font-weight: 600;
}

.el-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.el-button--primary {
  background: linear-gradient(to bottom, #50a8fe, #3b82f6);
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(80, 168, 254, 0.4);
}

.el-button--danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-button--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

@media (max-width: 768px) {
  .userCenter {
    width: 95%;
    padding: 10px;
  }
  
  .userCenterBody {
    padding: 10px 0 80px 0;
    margin-bottom: 90px;
  }
  
  .content {
    flex-direction: column;
  }
  
  .rightContent {
    width: 100%;
    margin-top: 20px;
  }
}

</style>